<template>
  <div class="svg-container">
    <div class="beds-example-container">
      <div class="beds-example">
        <span class="bed" draggable="false" :style="'background-color: ' + BED_STATUS_COLOR.EMPTY + ';'"> 空床 </span>
        <span class="bed" draggable="false" :style="'background-color: ' + BED_STATUS_COLOR.USING + ';'"> 使用中 </span>
        <span class="bed" draggable="false" :style="'background-color: ' + BED_STATUS_COLOR.RESERVED + ';'"> 被预约 </span>
        <span class="bed" draggable="false" :style="'background-color: ' + BED_STATUS_COLOR.NOT_AVAILABLE + ';'"> 不可用 </span>
      </div>
    </div>

    <div :class="svgClass">
      <div class="svg-border" :style="'width:' + svg.width + 'px;height:' + svg.height + 'px;'">
        <div v-if="rooms.length > 0" class="svg-btn-container" @click="toggleFullScreen"></div>
        <svg id="smallSvg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" @mousedown="menu = null">
          <g>
            <a v-for="room in rooms" v-if="room && room.geometry">
              <rect
                style="fill-opacity:1; stroke:black; stroke-width:1;'"
                :fill="room.color"
                :x="room.geometry.x * svg.width"
                :y="room.geometry.y * svg.height"
                :width="room.geometry.width * svg.width"
                :height="room.geometry.height * svg.height"/>
              <template v-if="room.beds < 1">
                <text
                  class="svg-default"
                  style="font-size: 5px;"
                  :x="(room.geometry.x + room.geometry.width / 2 - 0.0068) * svg.width"
                  :y="(room.geometry.y + room.geometry.height / 2) * svg.height"
                  fill="black">{{ room.rmName }}</text>
              </template>
              <template v-for="bed in room.beds" v-if="bed && bed.geometry">
                <rect
                  @contextmenu.prevent.stop="openMenu(bed, $event)"
                  :id="bed.bedId"
                  :style="'fill: ' + colorOfStatus(bed.status) + '; stroke:black; fill-opacity:1; stroke-width:1;'"
                  :x="(room.geometry.x + room.geometry.width * bed.geometry.x) * svg.width"
                  :y="(room.geometry.y + room.geometry.height * bed.geometry.y) * svg.height"
                  :width="room.geometry.width * bed.geometry.width * svg.width"
                  :height="room.geometry.height * bed.geometry.height * svg.height"/>
                <text
                  class="svg-default"
                  @contextmenu.prevent.stop="openMenu(bed, $event)"
                  style="font-size: 5px;"
                  :x="(room.geometry.x + room.geometry.width * (bed.geometry.x + bed.geometry.width/2) - 0.0068 ) * svg.width"
                  :y="(room.geometry.y + room.geometry.height * (bed.geometry.y + bed.geometry.height/2) + 0.0025 ) * svg.height"
                  fill="black">{{ bed.bedNo }}</text>
              </template>
            </a>
          </g>
        </svg>
      </div>
      <div v-if="menu && bedDetail" :style="menuStyle" @click.stop>
        <el-row><el-col :span="24">会员名称: {{bedDetail.memberName}}</el-col></el-row>
        <el-row><el-col :span="24">床位: {{bedDetail.bed}}</el-col></el-row>
        <el-row><el-col :span="24">照护等级: {{bedDetail.careLevel}}</el-col></el-row>
        <el-row><el-col :span="24">服务人员: {{bedDetail.serverMember}}</el-col></el-row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {BED_STATUS, BED_STATUS_COLOR, colorOfStatus} from '../../constants/roomConstants'
  import roomApi from '../../service/corporation/roomApi'
  import d3 from "../../plugins/d3"

  const SVG_SIZE = {
    width: window.innerWidth * 0.63,
    height:  window.innerHeight * 0.50,
  };
  const LARGE_SVG_SIZE = {
    width: window.innerWidth * 0.85,
    height:  window.innerHeight * 0.85,
  };

  export default {
    props: ["flId"],
    data() {
      return {
        rooms: [],  // 房间布局数据
        menu: null,
        BED_STATUS,
        BED_STATUS_COLOR,
        isFullScreen: false,
        svgClass: "",
        svg: SVG_SIZE,
        bedDetail: null
      }
    },
    watch: {
      flId(val) {
        if(val) {
          this.init();
        }
      }
    },
    computed: {
      menuStyle() {
        let style = null;
        if(this.menu) {
          style = {
            position: 'fixed',
            left: this.menu.x  * this.svg.width + 'px',
            top: this.menu.y  * this.svg.height + 'px',
            border: '1px',
            solid: '#f00',
            'background-color': '#f6f6f6',
            'font-size': '12px',
            'z-index': 2000,
            width: '150px',
            padding: '10px'
          }
        }
        return style;
      }
    },
    methods: {
      init() {
        if(this.flId) {
          roomApi.getReserveRoomBed(this.flId).then(res => {
            this.rooms = res.body.data;
            this.handleRoomsData();
            setTimeout(() =>{
              this.render();
            },2000);
          });
        }
      },
      render() {
        var group = d3.selectAll("g");
        var zoom = d3.behavior.zoom()
          .scaleExtent([1, 10])
          .on("zoom", function () {
            group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
          });
        group.call(zoom).on('dblclick.zoom', null);
      },
      handleRoomsData() {
        if(!this.rooms) {
          this.rooms = [];
        } else {
          for (let room of this.rooms) {
            room.geometry = JSON.parse(room.geometry);
            if (room.beds) {
              for (let bed of room.beds) {
                bed.geometry = JSON.parse(bed.geometry);
              }
            }
          }
        }
      },
      clearActivatedBed() {
        this.menu = null;
        this.bedDetail = null;
      },
      openMenu(bed, e) {
        if (bed.status === BED_STATUS.USING || bed.status === BED_STATUS.RESERVED) {
          roomApi.getMemberBedInfo(bed.bedId).then(res => {
            this.bedDetail = res.body.data;
          });
          this.menu = {
            x: e.clientX / this.svg.width,
            y: e.clientY / this.svg.height,
          }
        }
      },
      toggleFullScreen() {
        if (this.isFullScreen) {
          this.svgClass = "";
          this.svg = SVG_SIZE;
        } else {
          this.svgClass = "beds-edit-container";
          this.svg = LARGE_SVG_SIZE;
        }
        this.menu = null;
        this.isFullScreen = !this.isFullScreen;
      },
      colorOfStatus,
    },
    mounted() {
      this.init();
    }
  }
</script>

<style>
  .svg-container {
    float: right;
  }
  svg text {
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
  }
  .svg-border {
    border:2px solid #D5D5D5;
    position: relative;
    background: url("../../img/shading.png");
  }
  .beds-example-container {
    margin-bottom:10px;
  }
  .beds-example-container .beds-example {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .beds-example-container .bed {
    cursor: default;
    padding:5px 8px;
    border-radius: 5px;
    margin-right: 30px;
    /*width:50px;*/
    text-align:center;
    display:inline-block;
  }
  .beds-example-container .bed * {
    cursor: default;
    border-style:solid;
    border-color:black;
  }
  .svg-default {
    cursor: default
  }
  .svg-container .el-dialog--large{
    top:2%!important;
  }
  .svg-btn-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background: url("../../img/fs-btn.png");
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    height: 30px;
    width: 30px;
  }
  .svg-container .beds-edit-container {
    top: 70px;
    left: 13%;
    position: fixed;
    width: 85%;
    height: 87%;
    background-color: #fff;
  }
</style>
